```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>提交失败</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .error-icon {
            width: 4rem;
            height: 4rem;
            background-color: #ff4d4f;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            color: #fff;
            font-size: 2rem;
        }
        .error-title {
            text-align: center;
            font-size: 1.5rem;
            margin-top: 1rem;
        }
        .error-message {
            text-align: center;
            color: #666;
            margin-top: 0.5rem;
        }
        .error-button {
            display: block;
            margin: 2rem auto;
            padding: 0.75rem 1.5rem;
            background-color: #1890ff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            text-decoration: none;
            text-align: center;
        }
        .error-details {
            background-color: #f5f5f5;
            padding: 1rem;
            margin-top: 2rem;
        }
        .error-item {
            display: flex;
            align-items: center;
            margin-bottom: 0.5rem;
        }
        .error-item::before {
            content: "❌";
            margin-right: 0.5rem;
            color: #ff4d4f;
        }
        .error-link {
            color: #1890ff;
            text-decoration: none;
        }
    </style>
</head>
<body class="theme-light" data-layout="fluid" data-grid-columns="12">
    <div class="container" data-antd-component="Card">
        <div class="error-icon" data-antd-component="Icon" data-antd-props='{"type":"close-circle", "style": {"fontSize": "2rem", "color": "#fff"}}'>X</div>
        <h1 class="error-title" data-antd-component="Typography.Title">提交失败</h1>
        <p class="error-message" data-antd-component="Typography.Text">请核对并修改以下信息后，再重新提交。</p>
        <a href="#" class="error-button" data-antd-component="Button" data-antd-props='{"type":"primary"}'>返回修改</a>
        <div class="error-details" data-antd-component="Card">
            <p data-antd-component="Typography.Text">您提交的内容有如下错误：</p>
            <div class="error-item" data-antd-component="List.Item">
                您的账户已被冻结 <a href="#" class="error-link" data-antd-component="Link">立即解冻 &gt;</a>
            </div>
            <div class="error-item" data-antd-component="List.Item">
                您的账户还不具备申请资格 <a href="#" class="error-link" data-antd-component="Link">立即升级 &gt;</a>
            </div>
        </div>
    </div>
</body>
</html>
```

### 转换说明：
1. **结构分析**：页面整体布局为一个居中容器，包含错误图标、标题、消息、按钮和错误详情列表。
2. **组件映射**：
   - 容器 `.container` 转换为 `Card` 组件。
   - 错误图标 `.error-icon` 转换为 `Icon` 组件，使用 `close-circle` 图标类型。
   - 标题 `.error-title` 转换为 `Typography.Title` 组件。
   - 消息 `.error-message` 转换为 `Typography.Text` 组件。
   - 按钮 `.error-button` 转换为 `Button` 组件，并设置为 `primary` 类型。
   - 错误详情 `.error-details` 转换为 `Card` 组件。
   - 错误项 `.error-item` 转换为 `List.Item` 组件。
   - 链接 `.error-link` 转换为 `Link` 组件。
3. **属性标注**：
   - 使用 `data-antd-component` 标注组件类型。
   - 通过 `data-antd-props` 传递必要配置（JSON格式）。
   - 保留原始 `class` 作为样式钩子。